/*
 * @Author: Wilbur
 * @Date: 2019-01-21 08:51:48
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-04-02 16:56:47
 */

<template>
    <div class="container advanced-setting-wrapper">
        <el-form
            v-if="init"
            ref="mainform"
            :model="formData"
            label-position="right"
            status-icon
            :rules="formRule"
            label-width="110px"
            :disabled="false">
            <!-- 基础设置 -->
            <div class="form-unit">
                <div class="form-title">基础设置</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_price_rate"
                    label="价格倍数">

                    <el-input-number
                        placeholder="必填"
                        v-model="formData.type_price_rate"
                        :precision="2"
                        :step="0.1"
                        :max="2.5"
                        :min="1.1"
                        size="small"
                        class="task-input"/>
                    <span style="display:inline-block;color:#999;margin-left:12px">会在用户的报价上面，乘以对应的倍数</span>
                </el-form-item>

                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="提前预约">
                    <el-input
                        placeholder="提前预约信息"
                        v-model="formData.type_appointment"
                        size="small"
                        class="task-input"/>
                        <!-- <span style="display:inline-block;color:#999;margin-left:12px">成本价 * 价格倍数 = 对外报价</span> -->
                </el-form-item>

                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_show_hire"
                    label="广告主端显示">
                    <el-switch
                        v-model="formData.type_show_hire"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="0"/>
                </el-form-item>
            </div>

            <div class="form-unit">
                <div class="form-title">详细设置</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="title"
                    label="">
                    <el-tabs class="set-wrap">
                        <el-tab-pane label="资源介绍">
                            <ueditor
                                v-if="init"
                                id="ueditor1"
                                ref="ueditor1"
                                :default-value="formData.type_info"/>
                        </el-tab-pane>
                        <el-tab-pane label="投放须知">
                            <ueditor
                                v-if="init"
                                id="ueditor2"
                                ref="ueditor2"
                                :default-value="formData.type_notice"/>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="合作流程">
                            <ueditor
                                v-if="init"
                                id="ueditor3"
                                ref="ueditor3"
                                :default-value="formData.type_flow"/></el-tab-pane> -->
                        <el-tab-pane label="合作案例">
                            <ueditor
                                v-if="init"
                                id="ueditor4"
                                ref="ueditor4"
                                :default-value="formData.type_case"/>
                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
            </div>

            <div class="form-unit">
                <div class="operate-baar">
                    <el-button
                        size="medium"
                        :disabled="typeNo ? true : false"
                        @click="fnReset()">重置</el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="fnSubmit()">提交</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import ueditor from '@/components/common/ueditor.vue';
import regin from '@/assets/js/regin.min.js';
export default {
    components: { ueditor },
    data() {
        var validateAwardMoney = (rule, val, callback) => {

            if(!this.formData.award_money_max){
                callback(new Error('请填写最大赞助金额'));
                return;
            }
            if (Number(this.formData.award_money_min) > Number(this.formData.award_money_max)) {
                callback(new Error('赞助金额填写错误'));
                return ;
            }
            callback();
        };

        // 验证二位数组,且数组内元素不为空
        var validateArray = (rule, value, callback) => {
            if (!value) {
                callback(new Error(rule.message));
            } else {
                if (value.length < 2 || !value[0] || !value[1]) {
                    callback(new Error(rule.message));
                    return ;
                }
                callback();
            }
        };

        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "广告系统",
                },
                {
                    title: "资源分类列表",
                    name: 'resourceTypeList',
                },
                {
                    title: '高级设置'
                }
            ],
            typeNo: '',
            provence: [],
            formData: {
                type_price_rate: '',
                type_appointment: '',
                type_show_hire: '',
                type_info: '',
                type_notice: '',
                type_flow: '',
                type_case: ''
            },
            formRule: {
                type_price_rate: [
                    { required: true, message: '请输入正确的报价倍数', trigger: 'blur' }
                ],
                type_appointment: [
                    { required: true, message: '请输入提前预约信息', trigger: 'blur' }
                ],
                type_info: [
                    { required: true, message: '请填写资源介绍', trigger: 'blur' }
                ],
                type_notice: [
                    { required: true, message: '请填写投放须知', trigger: 'blur' }
                ],
                type_flow: [
                    { required: true, message: '请填写合作流程', trigger: 'blur' }
                ],
                type_case: [
                    { required: true, message: '请填写合作案例', trigger: 'blur' }
                ],
            },
            submitting: false,
            init: false,

            baseUrl: '',
            sessionTicket: localStorage.getItem('sessionTicket'),
            escape: escape,
            resouceList: []
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        this.typeNo = this.$route.query.type_no ? this.$route.query.type_no : '';

        if (!this.typeNo) {
            this.init = true;
        }else{
            this.fnInitDataBase();
        }
    },
    methods: {
        fnInitDataBase() {
            this.$post('/wei4/resource_type%5Cget', {
                type_no: this.typeNo
            }, resp => {
                if(resp.code == 1){
                    this.formData = {
                        ...resp.data,
                    };
                    this.init = true;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnInitTimeNow() {
            var timestamp=new Date().getTime();

            return timestamp;
        },
        fnEditBidInfo() {
            this.$post('/wei4/bid%5Cget', {
                type_no: this.typeNo
            }, resp => {
                if(resp.code == 1){
                    this.formData = {
                        ...resp.data,
                        bidTime: [new Date(resp.data.start_time * 1000), new Date(resp.data.end_time * 1000)]
                    };
                    this.init = true;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnSubmit(){
            if(this.submitting){
                return ;
            }
            this.formData.type_info = this.$refs.ueditor1 ? this.$refs.ueditor1.getUEContent() : '';
            this.formData.type_notice = this.$refs.ueditor2 ? this.$refs.ueditor2.getUEContent() : '';
            this.formData.type_flow = this.$refs.ueditor3 ? this.$refs.ueditor3.getUEContent() : '';
            this.formData.type_case = this.$refs.ueditor4 ? this.$refs.ueditor4.getUEContent() : '';
            this.$refs.mainform.validate(valid => {
                if(valid){
                    this.submitting = true;

                    let data = {
                        type_price_rate: this.formData.type_price_rate,
                        type_appointment: this.formData.type_appointment,
                        type_show_hire: this.formData.type_show_hire,
                        type_info: this.formData.type_info,
                        type_notice: this.formData.type_notice,
                        type_flow: this.formData.type_flow,
                        type_case: this.formData.type_case,
                    };

                    if(this.typeNo){
                        data.type_no = this.typeNo;

                        this.$post('/wei4/resource_type%5Cadvanced_edit', data, resp => {
                            if(resp.code == 1){
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '操作成功'
                                });
                                this.handleRoute('resourceTypeList');
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                            this.submitting = false;
                        });
                    }else{
                        this.$post('/wei4/bid%5Cadd', data, resp => {
                            if(resp.code == 1){
                                this.typeNo = resp.data.task_no;
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '操作成功'
                                });
                                this.$router.push({
                                    name: 'bidList'
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                            this.submitting = false;
                        });
                    }

                }
            });
        },
        /** 数组中删除某个元素 */
        fndeleteItem(list, index, bind) {
            list.splice(index, 1);
            this[bind] = list.length;
        },
        /** 上传组件回调 文件队列修改 */
        fnUploadChange(file, item) {
            item.preview_url = file.url;
        },
        fnBeforeUpload(file, item){
            item.status = 'uploading';
        },
        /** 上传组件回调 上传成功 */
        fnUploadSuccess(resp, file, item) {
            item.img_url = resp.url;
            item.status = 'success';
        },
        fnUploadError(item){
            item.preview_url = '';
            item.status = 'fail';
        },
        fnUpload(e, item) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            item.uploadTime = timeTmp;
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                progress: e.onProgress,
                success: resp => {
                    if(item.uploadTime != timeTmp){
                        return ;
                    }
                    if (resp.code == 1) {
                        // 调用组件成功回调,修改样式
                        e.onSuccess(resp.data, {
                            url: resp.data.url
                        }, this.fileList);
                    } else {
                        // 失败后调用组件error回调,删除对应元素
                        e.onError(resp.msg);
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.formData.hire_logo = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnReset(){
            this.$refs.mainform.resetFields();
        },
        /** 跳转页面 */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
    },
};
</script>

<style lang="less" scoped>
    .margin-top{
        margin-top: 15px;
    }
    .advanced-setting-wrapper {
      background: #fff;
      margin: 15px;
      margin-bottom: 0;
      padding: 30px;
      overflow: auto;
      .set-wrap{
          width: 750px;
      }
    }
    .form-unit {
      margin-bottom: 40px;
    }
    .form-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
      padding: 0 10px;
      border-left: 2px solid #1890ff;
      margin-bottom: 20px;
    }
    .task-input {
      width: 435px !important;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }

    .operate-baar {
      width: 100%;
      text-align: center;
      margin-top: 168px;
    }

    .editor-wrap{
        position: relative;
    }
</style>
<style lang="less">
</style>
